<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<text class="iconfont">&#xe600;</text>
			</view>
			<view class="title">填写租赁合同</view>
		</view>
		
		<!-- 房源信息 -->
		<view class="housing-info">
			<view class="section-title">房源信息</view>
			
			<view class="info-item">
				<text class="label">单元编号</text>
				<text class="value">{{ housing.unit.unit_number }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">所在位置</text>
				<text class="value">{{ housing.unit.building }} {{ housing.unit.floor }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">单元类型</text>
				<text class="value">{{ housing.unit.unit_type }}</text>
			</view>
			
			<view class="info-item">
				<text class="label">实际面积</text>
				<text class="value">{{ housing.unit.actual_area }} ㎡</text>
			</view>
			
			<view class="info-item">
				<text class="label">租金</text>
				<text class="value price">{{ housing.unit.rental_price }} 元/㎡/月</text>
			</view>
		</view>
		
		<!-- 合同表单 -->
		<view class="contract-form">
			<view class="section-title">合同信息</view>
			
			<!-- 合同编号 -->
			<view class="form-item">
				<text class="form-label">合同编号</text>
				<view class="form-input">
					<input type="text" v-model="formData.contract_number" placeholder="系统自动生成" disabled />
				</view>
			</view>
			
			<!-- 合同名称 -->
			<view class="form-item">
				<text class="form-label">合同名称</text>
				<view class="form-input">
					<input type="text" v-model="formData.contract_name" placeholder="请输入合同名称" />
				</view>
			</view>
			
			<!-- 租期开始日期 -->
			<view class="form-item">
				<text class="form-label">开始日期</text>
				<view class="form-input">
					<picker mode="date" :value="formData.start_date" @change="onStartDateChange" :start="minDate">
						<view class="picker-value">{{ formData.start_date || '请选择开始日期' }}</view>
					</picker>
				</view>
			</view>
			
			<!-- 租期结束日期 -->
			<view class="form-item">
				<text class="form-label">结束日期</text>
				<view class="form-input">
					<picker mode="date" :value="formData.end_date" @change="onEndDateChange" :start="formData.start_date || minDate">
						<view class="picker-value">{{ formData.end_date || '请选择结束日期' }}</view>
					</picker>
				</view>
			</view>
			
			<!-- 合同金额 -->
			<view class="form-item">
				<text class="form-label">合同金额</text>
				<view class="form-input">
					<input type="digit" v-model="formData.contract_amount" placeholder="请输入合同金额" />
					<text class="input-suffix">元</text>
				</view>
			</view>
			
			<!-- 支付周期 -->
			<view class="form-item">
				<text class="form-label">支付周期</text>
				<view class="form-input">
					<picker @change="onPaymentCycleChange" :value="paymentCycleIndex" :range="paymentCycles">
						<view class="picker-value">{{ paymentCycles[paymentCycleIndex] || '请选择支付周期' }}</view>
					</picker>
				</view>
			</view>
			
			<!-- 签约日期 -->
			<view class="form-item">
				<text class="form-label">签约日期</text>
				<view class="form-input">
					<picker mode="date" :value="formData.sign_date" @change="onSignDateChange" :end="today">
						<view class="picker-value">{{ formData.sign_date || '请选择签约日期' }}</view>
					</picker>
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="form-item">
				<text class="form-label">备注</text>
				<view class="form-input">
					<textarea v-model="formData.remarks" placeholder="请输入备注信息（选填）" />
				</view>
			</view>
		</view>
		
		<!-- 合同条款 -->
		<view class="terms-section">
			<view class="section-title">合同条款</view>
			<view class="terms-content">
				<text class="terms-text">1. 乙方应按时支付租金和物业费。</text>
				<text class="terms-text">2. 乙方应爱护房屋设施，不得擅自改变房屋结构。</text>
				<text class="terms-text">3. 乙方不得将房屋转租给他人。</text>
				<text class="terms-text">4. 合同期满后，乙方应将房屋恢复原状并交还甲方。</text>
				<text class="terms-text">5. 如需提前解约，应提前30天通知对方。</text>
			</view>
			
			<view class="agreement">
				<checkbox-group @change="onAgreementChange">
					<label class="agreement-label">
						<checkbox :checked="formData.agreement" color="#007AFF" />
						<text>我已阅读并同意以上条款</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" :disabled="!formData.agreement" @click="submitContract">提交合同</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				housing: {},
				userInfo: null,
				
				// 支付周期选择
				paymentCycles: ['月付', '季付', '半年付', '年付'],
				paymentCycleValues: ['月付', '季付', '半年付', '年付'],
				paymentCycleIndex: 0,
				
				// 今天日期
				today: '',
				// 最小日期（明天）
				minDate: '',
				
				// 表单数据
				formData: {
					application_id: '',
					contract_number: '',
					contract_name: '',
					contract_type: '房源租赁',
					start_date: '',
					end_date: '',
					contract_amount: '',
					payment_cycle: '月付',
					sign_date: '',
					remarks: '',
					agreement: false,
					contract_content: ''
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.formData.application_id = this.id
			
			// 设置今天日期
			const today = new Date()
			this.today = this.formatDate(today)
			this.formData.sign_date = this.today
			
			// 设置最小日期为明天
			const tomorrow = new Date()
			tomorrow.setDate(tomorrow.getDate() + 1)
			this.minDate = this.formatDate(tomorrow)
			this.formData.start_date = this.minDate
			
			// 获取用户信息
			this.getUserInfo()
			
			// 从缓存获取房源详情
			const housingDetail = uni.getStorageSync('currentHousingForContract')
			if (housingDetail && housingDetail.application_id == this.id) {
				this.housing = housingDetail
				
				// 预填合同名称
				this.formData.contract_name = `${housingDetail.unit.building}${housingDetail.unit.unit_number}租赁合同`
				
				// 预填合同编号
				const now = new Date()
				this.formData.contract_number = `HT-${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}-${this.id}`
				
				// 预计算合同金额
				if (housingDetail.unit.rental_price && housingDetail.unit.actual_area) {
					const monthlyRent = parseFloat(housingDetail.unit.rental_price) * parseFloat(housingDetail.unit.actual_area)
					this.formData.contract_amount = (monthlyRent * 12).toFixed(2)
				}
				
				// 预设结束日期（一年后）
				const endDate = new Date(this.minDate)
				endDate.setFullYear(endDate.getFullYear() + 1)
				this.formData.end_date = this.formatDate(endDate)
				
				// 生成合同内容
				this.generateContractContent()
			} else {
				// 如果缓存中没有，则返回
				uni.showToast({
					title: '房源信息获取失败，请返回重试',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					// 未登录跳转到登录页
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			},
			
			// 生成合同内容
			generateContractContent() {
				if (!this.housing || !this.housing.unit || !this.userInfo) return
				
				// 使用模板生成合同内容
				const contractContent = `
房屋租赁合同

甲方（出租方）：智慧园区管理公司
乙方（承租方）：${this.userInfo.real_name || this.userInfo.username}

根据《中华人民共和国合同法》及有关法律、法规的规定，甲乙双方在平等、自愿、协商一致的基础上，就房屋租赁事宜达成如下协议：

第一条 房屋基本情况
房屋坐落于：${this.housing.unit.building} ${this.housing.unit.floor || ''} ${this.housing.unit.unit_number}
房屋实际面积：${this.housing.unit.actual_area} 平方米
房屋用途：${this.housing.unit.unit_type}

第二条 租赁期限
租赁期共 ${this.calculateMonths(this.formData.start_date, this.formData.end_date)} 个月，自 ${this.formData.start_date} 起至 ${this.formData.end_date} 止。

第三条 租金及支付方式
1. 月租金：人民币 ${(parseFloat(this.housing.unit.rental_price) * parseFloat(this.housing.unit.actual_area)).toFixed(2)} 元
2. 支付方式：${this.formData.payment_cycle}
3. 合同总金额：人民币 ${this.formData.contract_amount} 元

第四条 交付房屋及设施设备
甲方应于 ${this.formData.start_date} 前将房屋交付给乙方使用。

第五条 乙方责任与义务
1. 乙方应按时支付租金和物业费。
2. 乙方应爱护房屋设施，不得擅自改变房屋结构。
3. 乙方不得将房屋转租给他人。
4. 合同期满后，乙方应将房屋恢复原状并交还甲方。
5. 如需提前解约，应提前30天通知对方。

第六条 甲方责任与义务
1. 甲方应保证房屋及设施符合使用要求。
2. 甲方应协助乙方办理入住手续。
3. 甲方应保障乙方的正常使用权。

第七条 合同解除
1. 双方协商一致，可以解除合同。
2. 因不可抗力导致合同无法继续履行的，合同自行终止。

第八条 违约责任
任何一方违反本合同约定，应当承担违约责任，赔偿由此给对方造成的损失。

第九条 其他约定
${this.formData.remarks || '无'}

甲方（签章）：                      乙方（签章）：
日期：${this.formData.sign_date}    日期：${this.formData.sign_date}
				`
				
				// 设置合同内容
				this.formData.contract_content = contractContent
			},
			
			// 计算月份差
			calculateMonths(startDate, endDate) {
				if (!startDate || !endDate) return 12
				
				const start = new Date(startDate)
				const end = new Date(endDate)
				
				return (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth())
			},
			
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			
			// 开始日期变更
			onStartDateChange(e) {
				this.formData.start_date = e.detail.value
				
				// 如果结束日期早于开始日期，则更新结束日期
				if (this.formData.end_date && this.formData.end_date < this.formData.start_date) {
					const endDate = new Date(this.formData.start_date)
					endDate.setFullYear(endDate.getFullYear() + 1)
					this.formData.end_date = this.formatDate(endDate)
				}
				
				// 更新合同内容
				this.generateContractContent()
			},
			
			// 结束日期变更
			onEndDateChange(e) {
				this.formData.end_date = e.detail.value
				// 更新合同内容
				this.generateContractContent()
			},
			
			// 签约日期变更
			onSignDateChange(e) {
				this.formData.sign_date = e.detail.value
				// 更新合同内容
				this.generateContractContent()
			},
			
			// 支付周期变更
			onPaymentCycleChange(e) {
				this.paymentCycleIndex = e.detail.value
				this.formData.payment_cycle = this.paymentCycleValues[this.paymentCycleIndex]
				// 更新合同内容
				this.generateContractContent()
			},
			
			// 同意条款变更
			onAgreementChange(e) {
				this.formData.agreement = e.detail.value.length > 0
			},
			
			// 提交合同
			submitContract() {
				// 表单验证
				if (!this.formData.contract_name) {
					uni.showToast({
						title: '请输入合同名称',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.start_date) {
					uni.showToast({
						title: '请选择开始日期',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.end_date) {
					uni.showToast({
						title: '请选择结束日期',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.contract_amount) {
					uni.showToast({
						title: '请输入合同金额',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.sign_date) {
					uni.showToast({
						title: '请选择签约日期',
						icon: 'none'
					})
					return
				}
				
				// 提交确认
				uni.showModal({
					title: '提交确认',
					content: '确定要提交合同信息吗？提交后将进入审核流程。',
					success: (res) => {
						if (res.confirm) {
							this.doSubmitContract()
						}
					}
				})
			},
			
			// 执行提交合同
			doSubmitContract() {
				uni.showLoading({
					title: '提交中'
				})
				
				// 构建提交数据 - 只包含后端API所需的必要字段
				const submitData = {
					application_id: this.formData.application_id,
					contract_content: this.formData.contract_content,
					contract_start_date: this.formData.start_date,
					contract_end_date: this.formData.end_date
				}
				
				uni.request({
					url: 'http://localhost:8000/api/services/leasing-applications/submit-contract/',
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					data: submitData,
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200 || res.data.code === 201) {
							uni.showToast({
								title: '合同提交成功',
								icon: 'success'
							})
							
							// 延迟返回
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.data.message || '合同提交失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('合同提交失败', err)
						uni.showToast({
							title: '合同提交失败，请检查网络',
							icon: 'none'
						})
					}
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx;
	}
	
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
	}
	
	.back-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx 0 20rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #007AFF;
	}
	
	.housing-info {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.label {
		width: 160rpx;
		color: #666666;
	}
	
	.value {
		flex: 1;
		color: #333333;
	}
	
	.price {
		color: #FF5722;
		font-weight: bold;
	}
	
	.contract-form {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.form-input {
		position: relative;
		border: 1rpx solid #DDDDDD;
		border-radius: 8rpx;
		padding: 20rpx;
		background-color: #F8F8F8;
	}
	
	.form-input input, .form-input textarea {
		width: 100%;
		font-size: 28rpx;
	}
	
	.form-input textarea {
		height: 160rpx;
	}
	
	.picker-value {
		font-size: 28rpx;
		color: #333333;
	}
	
	.input-suffix {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: #666666;
	}
	
	.terms-section {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	
	.terms-content {
		background-color: #F8F8F8;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	
	.terms-text {
		display: block;
		font-size: 26rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}
	
	.agreement {
		margin: 30rpx 0;
	}
	
	.agreement-label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	
	.submit-section {
		padding: 30rpx;
	}
	
	.submit-btn {
		background-color: #007AFF;
		color: white;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
	}
	
	.submit-btn[disabled] {
		background-color: #CCCCCC;
	}
</style> 